<template>
    <div>
        <el-collapse expand-icon-position="left">
            <el-collapse-item v-for="knowledgeText in knowledgeTextList" :name="knowledgeText.id"
                :key="knowledgeText.id">
                <template #title>
                    <el-tag size="small">{{ knowledgeText.source }}</el-tag>
                    <span style="margin-left: 10px;">{{ knowledgeText.title }}</span>
                </template>
                <div>
                    {{ knowledgeText.text }}
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>

</template>
<script setup lang="js">
import { ref, onMounted, defineProps } from 'vue';
import ragKnowledgeTextApi from '@/api/ragKnowledgeTextApi';
const props = defineProps({
    knowledgeSetId: {
        type: Number,
        default: -1
    }
})
const knowledgeTextList = ref([]);

const fetchKnowledgeTextList = () => {
    ragKnowledgeTextApi.list({ knowledgeSetId: props.knowledgeSetId }).then((res) => {
        knowledgeTextList.value = res.data;
    });
};

onMounted(() => {
    console.log("knowledgeSetId:", props.knowledgeSetId);
    fetchKnowledgeTextList()
});
</script>